const path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { ProgressPlugin, ProvidePlugin } = require('webpack')

module.exports = {
    mode: "development",
    // 入口
    // entry: "./src/main.js",
    entry: {
        // app: path.resolve(__dirname,"../", "src/main.js")
        chunk: ["react", "react-dom/client"],
        app: {
            import: path.resolve(__dirname, '../', 'src/main.js'),
            dependOn: 'chunk'
        }
    },

    // 出口
    output: {
        path: path.resolve(__dirname, "../", "dist"),
        filename: "js/[name].[chunkhash:8].js",
        clean: true
    },
    // 配置插件
    plugins: [
        new HtmlWebpackPlugin({
            // template: './public/index.html',
            template: path.resolve(__dirname, '../', 'public/index.html'),
            inject: 'body',
            filename: 'index.html',
            title: 'vue-element-admin'
        }),
        new ProgressPlugin({
            handler(percentage, message, ...args) {
                if (percentage == 1) {
                    console.log("100% 打包/启动成功~");
                } else {
                    console.log(`${Math.floor(percentage * 100)}%正在打包（编译）...`);
                }
            }
        }),
        new ProvidePlugin({
            React: path.resolve(__dirname, "../", "node_modules/react/index.js")
        })
    ],
    module: {
        rules: [
            // loader是用来加载的，加载完成后，使用@babel/**进行编译转化，转化成ES5的代码 */
            //当webpack开始进行工作时，遇到以js或jsx结尾的模块时，使用babel-loader进行加载
            //加载完后，需要交给@babel/*编译器进行编译，编译后得到ES5的代码
            { test: /\.(js|jsx|ts|tsx)$/, use: "babel-loader", exclude: /node_modules/ },
            // css/scss样式处理
            { test: /\.(css|scss)$/, use: ['style-loader', 'css-loader', 'sass-loader'] },
            // 图片处理
            // type: 'asset/resource',相当于使用了file-loader
            {
                test: /\.(png|jpg|svg|gif|jpeg|webp)$/,
                type: 'asset/resource',
                generator: {
                    filename: 'img/[name].[contenthash:8][ext]'
                }
            }
        ]
    }
}